<template>
  <div class="work-detail-container">
    <a-row type="flex" justify="center">
      <a-col :span="8" class="cover-img">
        <img :src="currentTemplate.coverImg" alt="">
      </a-col>
      <a-col :span="8">
        <h2>{{currentTemplate.title}}</h2>
        <p>{{currentTemplate.desc}}</p>
      <div class="author">
        <a-avatar :src="currentTemplate.user.picture" v-if="currentTemplate.user.picture">
        </a-avatar>
        <a-avatar v-else>
          <template v-slot:icon><UserOutlined /></template>
        </a-avatar>
        该模版由 <b>{{currentTemplate.user.nickName}}</b> 创作
      </div>
      <div class="bar-code-area" >
        <span>扫一扫，手机预览</span>
        <div ref="container"></div>
      </div>
      <div class="use-button">
        <router-link to="/editor">
          <a-button
            type="primary" size="large"
            :loading="isCreating"
          >
            {{ isCreating ? '创建中...' : '使用模版' }}
          </a-button>
        </router-link>
        <a-button
          size="large"
          :style="{ marginLeft: '20px' }"
        >
          下载图片海报
        </a-button>
      </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import cover from '@/assets/cover.png'

const isCreating = ref<boolean>(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const currentTemplate = reactive<any>({
  coverImg: cover,
  title: '前端架构师模板详情',
  desc: '前端架构师模板详情desc...',
  user: { picture: '', nickName: 'devin' }
})
</script>

<style scoped lang="less">
.work-detail-container {
  margin-top:50px;
}
.cover-img {
  margin-right: 30px;
}
.cover-img img {
  width: 100%;
}
.use-button {
  margin: 30px 0;
}
.ant-avatar {
  margin-right: 10px;
}
.bar-code-area {
  margin: 20px 0;
}
</style>